import React, { Fragment, useState } from 'react';
import Icon from '@ant-design/icons';
import { HomeIcon, fileIcon } from './icon/icon';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { MenuList } from '../../util/util';
import { CrumbsActive } from '../../store/actives/actives';
import './scss/crumbs.scss';

/**
 *	@author 梁永琪
 *  @time 2021 - 06 - 07
 *  @param  参数说明 [{name:"",url:""}]
 */
const Crumbs = (props) => {
  const [CrumbsList] = useState(props.CrumbsList);
  let goRouter = async (url, name) => {
    if (!url) return;
    if (name === '首页') {
      props.CrumbsActiveFun(['sub1', 'sub1']);
      props.history.replace('/');
      return;
    }
    if (!MenuList()[name]) return;
    await props.CrumbsActiveFun(MenuList()[name]);
    props.history.replace(url);
  };
  return (
    <div className="Crumbs flex">
      {CrumbsList ? (
        <Fragment>
          <Icon component={HomeIcon} />
          <span className="homeColor" onClick={() => goRouter('/', '首页')}>
            首页
          </span>
          {CrumbsList.map((item, index) => {
            return (
              <div key={item + index}>
                <span className="CrumbsXian">/</span>
                <Icon component={fileIcon} className="fileStyle" />
                {item.name ? (
                  <span
                    className={[
                      'textStyle',
                      item.url ? 'CrumbsTag' : 'allowed',
                      index === CrumbsList.length - 1 ? 'CrumbsText' : '',
                    ].join(' ')}
                    onClick={() => goRouter(item.url, item.name)}>
                    {item.name}
                  </span>
                ) : (
                  <span
                    className={[
                      'textStyle',
                      item.url ? 'CrumbsTag' : 'allowed',
                      index === CrumbsList.length - 1 ? 'CrumbsText' : '',
                    ].join(' ')}
                    onClick={() => goRouter(item.url, '未命名')}>
                    未命名
                  </span>
                )}
              </div>
            );
          })}
        </Fragment>
      ) : (
        <Fragment>
          <Icon component={HomeIcon} />
          <span className="homeColor" onClick={() => goRouter('/', '首页')}>
            首页
          </span>
        </Fragment>
      )}
    </div>
  );
};
let mapDisplayToProps = (display) => {
  return {
    CrumbsActiveFun(active) {
      display(CrumbsActive(active));
    },
  };
};
export default connect(null, mapDisplayToProps)(withRouter(Crumbs));
